<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静电探秘实验室 - 电荷作用探究游戏</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
            color: #e3f2fd;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .header {
            text-align: center;
            margin-bottom: 25px;
            padding: 15px;
            width: 100%;
            background: rgba(13, 71, 161, 0.6);
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(45deg, #64b5f6, #e1f5fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(100, 181, 246, 0.5);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 10px;
        }
        
        .container {
            display: flex;
            width: 100%;
            max-width: 1200px;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .main-content {
            flex: 1;
            min-width: 300px;
        }
        
        .sidebar {
            width: 280px;
            background: rgba(13, 71, 161, 0.4);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        
        .canvas-container {
            position: relative;
            background: rgba(25, 118, 210, 0.2);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            margin-bottom: 20px;
        }
        
        #gameCanvas {
            display: block;
            background: radial-gradient(circle at center, #0d47a1 0%, #1a237e 100%);
            cursor: crosshair;
        }
        
        .controls {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #2196f3, #64b5f6);
            color: white;
        }
        
        .btn-secondary {
            background: linear-gradient(45deg, #ff9800, #ffb74d);
            color: white;
        }
        
        .btn-danger {
            background: linear-gradient(45deg, #f44336, #ef5350);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .charge-selector {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-bottom: 15px;
        }
        
        .charge-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid transparent;
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .charge-btn.positive {
            background: radial-gradient(circle, #ff5252, #d32f2f);
            color: white;
        }
        
        .charge-btn.negative {
            background: radial-gradient(circle, #448aff, #1976d2);
            color: white;
        }
        
        .charge-btn.active {
            border-color: #ffd54f;
            box-shadow: 0 0 15px rgba(255, 213, 79, 0.7);
        }
        
        .info-panel {
            margin-bottom: 20px;
        }
        
        .info-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #64b5f6;
        }
        
        .info-content {
            font-size: 0.9rem;
            line-height: 1.6;
            opacity: 0.9;
        }
        
        .stats {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .stat-item {
            display: flex;
            justify-content: space-between;
            padding: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }
        
        .mobile-controls {
            display: none;
        }
        
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                order: -1;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .mobile-controls {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            
            .desktop-controls {
                display: none;
            }
        }
        
        .particle {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #e1f5fe;
            box-shadow: 0 0 10px rgba(225, 245, 254, 0.8);
            pointer-events: none;
        }
        
        .charge-marker {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            color: white;
            pointer-events: none;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        
        .charge-marker.positive {
            background: radial-gradient(circle, #ff5252, #d32f2f);
        }
        
        .charge-marker.negative {
            background: radial-gradient(circle, #448aff, #1976d2);
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>⚡ 静电探秘实验室 ⚡</h1>
        <div class="subtitle">探索电荷的奥秘 - 同种相斥，异种相吸</div>
    </div>
    
    <div class="container">
        <div class="main-content">
            <div class="canvas-container">
                <canvas id="gameCanvas" width="800" height="600"></canvas>
            </div>
            
            <div class="controls desktop-controls">
                <button class="btn btn-primary" onclick="togglePause()">
                    <span id="pauseBtn">⏸️ 暂停</span>
                </button>
                <button class="btn btn-secondary" onclick="randomCharges()">
                    🎲 随机生成
                </button>
                <button class="btn btn-danger" onclick="resetSimulation()">
                    🔄 重置实验
                </button>
            </div>
            
            <div class="charge-selector">
                <button class="charge-btn positive active" onclick="setChargeType('positive')" title="正电荷">+</button>
                <button class="charge-btn negative" onclick="setChargeType('negative')" title="负电荷">-</button>
            </div>
        </div>
        
        <div class="sidebar">
            <div class="info-panel">
                <div class="info-title">🔬 实验指南</div>
                <div class="info-content">
                    <p>• 点击画布放置电荷</p>
                    <p>• 红色"+"为正电荷，蓝色"-"为负电荷</p>
                    <p>• 观察粒子的运动轨迹</p>
                    <p>• 同种电荷相斥，异种电荷相吸</p>
                </div>
            </div>
            
            <div class="info-panel">
                <div class="info-title">📊 实验数据</div>
                <div class="stats">
                    <div class="stat-item">
                        <span>正电荷数量：</span>
                        <span id="positiveCount">0</span>
                    </div>
                    <div class="stat-item">
                        <span>负电荷数量：</span>
                        <span id="negativeCount">0</span>
                    </div>
                    <div class="stat-item">
                        <span>总粒子数：</span>
                        <span id="particleCount">0</span>
                    </div>
                    <div class="stat-item">
                        <span>运行状态：</span>
                        <span id="status">运行中</span>
                    </div>
                </div>
            </div>
            
            <div class="mobile-controls">
                <button class="btn btn-primary" onclick="togglePause()">
                    <span id="pauseBtnMobile">⏸️ 暂停</span>
                </button>
                <button class="btn btn-secondary" onclick="randomCharges()">
                    🎲 随机生成
                </button>
                <button class="btn btn-danger" onclick="resetSimulation()">
                    🔄 重置实验
                </button>
            </div>
        </div>
    </div>

    <script>
        // 游戏状态
        let canvas = document.getElementById('gameCanvas');
        let ctx = canvas.getContext('2d');
        let charges = [];
        let particles = [];
        let isPaused = false;
        let currentChargeType = 'positive';
        let animationId = null;

        // 响应式画布大小
        function resizeCanvas() {
            const container = document.querySelector('.canvas-container');
            const rect = container.getBoundingClientRect();
            const maxWidth = Math.min(800, rect.width - 40);
            const maxHeight = Math.min(600, window.innerHeight * 0.6);
            
            canvas.width = maxWidth;
            canvas.height = maxHeight;
        }

        // 初始化
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // 电荷类
        class Charge {
            constructor(x, y, type) {
                this.x = x;
                this.y = y;
                this.type = type; // 'positive' or 'negative'
                this.strength = type === 'positive' ? 1 : -1;
            }

            draw() {
                const color = this.type === 'positive' ? '#ff5252' : '#448aff';
                ctx.beginPath();
                ctx.arc(this.x, this.y, 15, 0, Math.PI * 2);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.strokeStyle = '#fff';
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // 绘制符号
                ctx.fillStyle = '#fff';
                ctx.font = 'bold 16px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(this.type === 'positive' ? '+' : '-', this.x, this.y);
            }
        }

        // 粒子类
        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.vx = (Math.random() - 0.5) * 2;
                this.vy = (Math.random() - 0.5) * 2;
                this.mass = 1;
                this.radius = 3;
            }

            update() {
                if (isPaused) return;

                let fx = 0;
                let fy = 0;

                // 计算所有电荷对粒子的作用力
                charges.forEach(charge => {
                    const dx = charge.x - this.x;
                    const dy = charge.y - this.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance > 5) {
                        const force = (charge.strength * 100) / (distance * distance);
                        fx += (dx / distance) * force;
                        fy += (dy / distance) * force;
                    }
                });

                // 更新速度和位置
                this.vx += fx / this.mass;
                this.vy += fy / this.mass;
                
                // 速度衰减
                this.vx *= 0.99;
                this.vy *= 0.99;
                
                this.x += this.vx;
                this.y += this.vy;

                // 边界检测
                if (this.x < this.radius || this.x > canvas.width - this.radius) {
                    this.vx *= -0.8;
                    this.x = Math.max(this.radius, Math.min(canvas.width - this.radius, this.x));
                }
                if (this.y < this.radius || this.y > canvas.height - this.radius) {
                    this.vy *= -0.8;
                    this.y = Math.max(this.radius, Math.min(canvas.height - this.radius, this.y));
                }
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = '#e1f5fe';
                ctx.fill();
                ctx.shadowColor = '#e1f5fe';
                ctx.shadowBlur = 10;
                ctx.shadow();
            }
        }

        // 事件处理
        canvas.addEventListener('click', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            // 检查是否点击在现有电荷上
            let clickedOnCharge = false;
            charges.forEach((charge, index) => {
                const distance = Math.sqrt((charge.x - x) ** 2 + (charge.y - y) ** 2);
                if (distance < 20) {
                    charges.splice(index, 1);
                    clickedOnCharge = true;
                }
            });
            
            if (!clickedOnCharge) {
                charges.push(new Charge(x, y, currentChargeType));
            }
            
            updateStats();
        });

        // 设置电荷类型
        function setChargeType(type) {
            currentChargeType = type;
            document.querySelectorAll('.charge-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`.charge-btn.${type}`).classList.add('active');
        }

        // 暂停/继续
        function togglePause() {
            isPaused = !isPaused;
            const pauseBtn = document.getElementById('pauseBtn');
            const pauseBtnMobile = document.getElementById('pauseBtnMobile');
            const status = document.getElementById('status');
            
            if (isPaused) {
                pauseBtn.textContent = '▶️ 继续';
                pauseBtnMobile.textContent = '▶️ 继续';
                status.textContent = '已暂停';
            } else {
                pauseBtn.textContent = '⏸️ 暂停';
                pauseBtnMobile.textContent = '⏸️ 暂停';
                status.textContent = '运行中';
            }
        }

        // 随机生成电荷
        function randomCharges() {
            charges = [];
            const count = Math.floor(Math.random() * 5) + 3;
            
            for (let i = 0; i < count; i++) {
                const x = Math.random() * (canvas.width - 60) + 30;
                const y = Math.random() * (canvas.height - 60) + 30;
                const type = Math.random() > 0.5 ? 'positive' : 'negative';
                charges.push(new Charge(x, y, type));
            }
            
            updateStats();
        }

        // 重置实验
        function resetSimulation() {
            charges = [];
            particles = [];
            isPaused = false;
            updateStats();
            
            document.getElementById('pauseBtn').textContent = '⏸️ 暂停';
            document.getElementById('pauseBtnMobile').textContent = '⏸️ 暂停';
            document.getElementById('status').textContent = '运行中';
        }

        // 更新统计信息
        function updateStats() {
            const positiveCount = charges.filter(c => c.type === 'positive').length;
            const negativeCount = charges.filter(c => c.type === 'negative').length;
            
            document.getElementById('positiveCount').textContent = positiveCount;
            document.getElementById('negativeCount').textContent = negativeCount;
            document.getElementById('particleCount').textContent = particles.length;
        }

        // 添加粒子
        function addParticles() {
            if (isPaused) return;
            
            if (particles.length < 100 && charges.length > 0) {
                particles.push(new Particle(
                    Math.random() * canvas.width,
                    Math.random() * canvas.height
                ));
                updateStats();
            }
        }

        // 游戏循环
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制网格背景
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
            ctx.lineWidth = 1;
            for (let i = 0; i < canvas.width; i += 50) {
                ctx.beginPath();
                ctx.moveTo(i, 0);
                ctx.lineTo(i, canvas.height);
                ctx.stroke();
            }
            for (let i = 0; i < canvas.height; i += 50) {
                ctx.beginPath();
                ctx.moveTo(0, i);
                ctx.lineTo(canvas.width, i);
                ctx.stroke();
            }
            
            // 绘制电荷
            charges.forEach(charge => charge.draw());
            
            // 更新和绘制粒子
            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });
            
            // 移除超出边界的粒子
            particles = particles.filter(p => 
                p.x > 0 && p.x < canvas.width && 
                p.y > 0 && p.y < canvas.height
            );
            
            animationId = requestAnimationFrame(gameLoop);
        }

        // 初始化粒子
        for (let i = 0; i < 20; i++) {
            particles.push(new Particle(
                Math.random() * canvas.width,
                Math.random() * canvas.height
            ));
        }

        // 定时添加粒子
        setInterval(addParticles, 500);

        // 开始游戏循环
        updateStats();
        gameLoop();
    </script>
</body>
</html>
